*{
    margin: 0px;
    padding: 0px;
}
html{
    height: 100%;
    overflow: hidden;
    font-family: 'Microsoft Yahei';
}
body {
    height: 100%;
    position: relative;
}
/*.bg{*/
    /*background: url("../img/bg_1.jpg") no-repeat ;*/
    /*background-size: 100% 100%;*/
    /*overflow: hidden;*/
    /*width: 100%;*/
/*}*/
.box{
    width: 1024px;
    height: 640px;
    margin: 0px auto;
    position: relative;

}
.svg-level-1{
    position: absolute;
    z-index: 10;
}
.svg-level-1 .st0{fill:#70DAFD;}
.svg-level-2{
    position: absolute;
    z-index: 20;
}
.svg-level-g-origin{
    /*transform: rotate(0deg);*/
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
.svg-level-2 .st0{fill:#70DAFD;}

.svg-level-3{
    position: absolute;
    z-index: 300;
}
.svg-level-3 .st0{fill:#70DAFD;cursor: pointer}
.svg-level-3 .st1{opacity:0.6;fill:#70DAFD;}
.svg-level-3 .st2{opacity:1;fill:#70DAFD;}
.svg-level-3 .st3{fill:none;}
.svg-level-4{
    position: absolute;
    z-index: 40;
}
.svg-level-4 .st0{fill:#84F6FF;}
.svg-level-5{
    position: absolute;
    z-index: 50;
}
.svg-level-5 .st0{fill:#70DAFD;}
.svg-level-6{
    position: absolute;
    z-index: 60;
}
.svg-level-6 .st0{opacity:0.32;}
.svg-level-6 .st1{fill:#70DAFD;}
.svg-level-7{
    position: absolute;
    z-index: 70;
}
.svg-level-7 .st0{opacity:0.32;fill:#70DAFD;}
.svg-level-8{
    position: absolute;
    z-index: 80;
}
.svg-level-8 .st1{fill:#70DAFD;opacity:1}
.svg-level-8 .st2{fill:#70DAFD;opacity:0.6}
.svg-level-8 .st0{opacity:0.6;}
.svg-level-8 .st3{fill:#84F6FF;}

.svg-level-10{
    position: absolute;
    z-index: 100;
}
.svg-level-10 .st0{fill:none;stroke:#70DAFD;stroke-miterlimit:10;}
.svg-level-11{
    position: absolute;
    z-index: 110;
}
.svg-level-11 .st0{fill:#70DAFD;}
.svg-level-12{
    position: absolute;
    z-index: 120;
}
.svg-level-12 .st0{opacity:0.6;}
.svg-level-12 .st1{fill:#84F6FF;}
.svg-level-14{
    position: absolute;
    z-index: 290;
    top:0;
}
.svg-level-14 .descCircle{fill:none;stroke:#84F6FF;stroke-miterlimit:10;}
.descList{
    position: absolute;
    width: 1024px;
    height: 640px;
    top: 0;
    left: 0;
    z-index: 110;
}
.descList .container {
    width: 150px;
    height: 0;
    overflow: hidden;
    visibility: visible;
    position: absolute;
}

.descList .container .top{
    width: 150px;
    height: 10px;
    background: url("../img/desc_bg_top.png") no-repeat;
}
.descList .container .list{
    width: 150px;
    background: url("../img/desc_bg_middle.png") repeat-y;
    text-align: center;
}
.descList .container .bottom{
    width: 150px;
    height: 10px;
    background: url("../img/desc_bg_bottom.png") no-repeat;
}
.descList .verticalLine{
    position: absolute;
    width: 2px;
    height: 0px;
    background: #84F6FF;
    visibility: hidden;
}
.descList .list p{
    font-size: 12px;
    color: #84F6FF;
    height: 15px;
    line-height: 15px;
    opacity: 0;
}
.descList .showText p{
    animation: textOpacity 0.6s linear;
    animation-fill-mode: forwards;
    cursor: pointer;
}
@keyframes textOpacity {
    to{
        opacity: 1;
    }
}
.descList .showTextIe9 p{
    opacity: 1;
}


.labels{
    position: absolute;
    width: 1024px;
    height: 640px;
    left: 0;
    top: 0;
    z-index: 310;
}
.label-box{
    width: 63px;
    height: 153px;
    background: url("../img/label-1.png") no-repeat;
    background-size: 63px 153px;
    word-wrap: break-word;
    position: absolute;
    top:0;
    left:0;
    cursor: pointer;
}
.label-box-over{
    background: url("../img/label-2.png") no-repeat;
    background-size: 63px 153px;
    word-wrap: break-word;
    /*overflow: hidden;*/
    position: absolute;
    top:0;
    left:0;
    cursor: pointer;
}
.label-box .text{
    color: #84f6ff;
    font-size: 12px;
    line-height: 12px;
    width: 63px;
    height: 153px;
    vertical-align: middle;
    display: table-cell;
    text-align: center;
    opacity: 0.5;
}
.label-box .circle{
    width: 7px;
    height:7px;
    border-radius: 7px;
    /*background: url("img/circle.png") no-repeat;*/
    background-size: 7px 7px;
}
.label-box-over .text{
    color: #84f6ff;
    font-size: 12px;
    line-height: 12px;
    width: 63px;
    height: 153px;
    vertical-align: middle;
    display: table-cell;
    text-align: center;
    opacity: 1;
}
.label-box-over .circle{
    width: 1px;
    height: 1px;
    border-radius: 50%;
    background: red;
    position: absolute;
    top: 18px;
    left: 30px;
    visibility: hidden;
}
.label-box .circle{
    width: 1px;
    height: 1px;
    border-radius: 50%;
    background: red;
    position: absolute;
    top: 21px;
    left: 33px;
    visibility: hidden;
}
.line0{fill:none;stroke:#70DAFD;stroke-miterlimit:10;}
.line1{fill:none;stroke:#84F6FF;stroke-miterlimit:10;}
.line2{opacity:0.5;fill:none;stroke:#84F6FF;stroke-width:0.5;stroke-miterlimit:10;}

.label-1{
    transform: translate(611px,31px) rotate(30deg);
}
.label-2{
    transform: translate(525px,3px) rotate(11deg);
}
.label-3{
    transform: translate(437px,1px) rotate(-11deg);
}
.label-3{
    transform: translate(437px,1px) rotate(-11deg);
}
.label-4{
    transform: translate(353px,30px) rotate(-30deg);
}
.label-5{
    transform: translate(286px,93px) rotate(-51deg);
}
.label-6{
    transform: translate(245px,171px) rotate(-73deg);
}
.label-7{
    transform: translate(233px,261px) rotate(-94deg);
}
.label-8{
    transform: translate(257px,350px) rotate(-116deg);
}
.label-9{
    transform: translate(313px,424px) rotate(-137deg)
}
.label-10{
    transform: translate(390px,472px) rotate(-158deg)
}
.label-11{
    transform: translate(480px,489px) rotate(180deg)
}
.label-12{
    transform: translate(571px,470px) rotate(156deg)
}
.label-13{
    transform: translate(646px,420px) rotate(136deg)
}
.label-14{
    transform: translate(702px,350px) rotate(113deg)
}
.label-15{
    transform: translate(725px,265px) rotate(95deg)
}
.label-16{
    transform: translate(717px,173px) rotate(74deg)
}
.label-17{
    transform: translate(675px,95px) rotate(54deg)
}

.maxIndex{
    z-index: 500;
}

canvas{
    margin: 0 auto  0 auto;
    display: block;
    position: absolute;
    left:50%;
}
.none{
    visibility: hidden;
}

.level-light{
    position: absolute;
    width: 1024px;
    height: 640px;
    left: 0;
    top: 0;
    z-index: 150;
}
.light-1{
    left: 0;
    width: 362px;
    height: 463px;
    background: url("../img/s-1.png") no-repeat;
    position: absolute;
    transform: scale(0.70);
    left: 436px;
    top: -89px;
    z-index: 200;
}
.light-2{
    left: 0;
    width: 467px;
    height: 486px;
    background: url("../img/s-2.png") no-repeat;
    position: absolute;
    transform: scale(0.70);
    left: 139px;
    top: -93px;
}
.light-3{
    left: 0;
    width: 452px;
    height: 364px;
    background: url("../img/s-3.png") no-repeat;
    position: absolute;
    transform: scale(0.7);
    left: 105px;
    top: 117px;
}
.light-4{
    left: 0;
    width: 543px;
    height: 496px;
    background: url("../img/s-4.png") no-repeat;
    position: absolute;
    transform: scale(0.7);
    left: 108px;
    top: 237px;
}
.light-5{
    left: 0;
    width: 505px;
    height: 830px;
    background: url("../img/s-5.png") no-repeat;
    position: absolute;
    transform: scale(0.7);
    left: 423px;
    top: -51px;
}
